<template>
  <div style="width: 100%; height: 100%;">
    <div class="trace-qr-container">
      <div class="operate-box">
        <el-button type="primary" plain size="small" @click="back">返 回</el-button>
        <el-button v-if="judgePermission(pageNo, 'config')" type="primary" plain size="small" @click="complete">配置溯源码</el-button>
        <el-button type="primary" plain size="small" @click="preview">预览</el-button>
      </div>
      <div class="main-box">
        <div class="float-box">
          <div
            class="show-content-btn"
            :class="{'selected-btn':selectedIndex===0}"
            @click="scrollIntoView('productData',0)"
          >产品信息</div>
          <div
            class="show-content-btn"
            :class="{'selected-btn':selectedIndex===1}"
            @click="scrollIntoView('proprietorData',1)"
          >厂家信息</div>
          <div
            class="show-content-btn"
            :class="{'selected-btn':selectedIndex===2}"
            @click="scrollIntoView('individuationInfo',2)"
          >{{ traceInfo.individuationInfo?'个体信息':'批次信息' }}</div>
          <div
            class="show-content-btn"
            :class="{'selected-btn':selectedIndex===3}"
            @click="scrollIntoView('testReportInfo',3)"
          >检验报告</div>
          <div
            class="show-content-btn"
            :class="{'selected-btn':selectedIndex===4}"
            @click="scrollIntoView('environmentalData',4)"
          >环境数据</div>
        </div>
        <div id="right-box" class="right-box">
          <productLayout id="productData" :item="traceInfo" :page-no="pageNo" :show="show" />
          <proprietorLayout id="proprietorData" :item="traceInfo" :page-no="pageNo" :show="show" />
          <individuationLayout
            id="individuationInfo"
            :item="traceInfo"
            :page-no="pageNo"
            :show="show"
          />
          <testReportInfoLayout id="testReportInfo" :page-no="pageNo" :item="traceInfo" />
          <environmentalDataLayout id="environmentalData" :page-no="pageNo" :item="traceInfo" />
        </div>
      </div>
    </div>

    <Phone :phone-status="showH5" @close="showH5=false">
      <template slot="conts">
        <div class="page_conts">
          <traceabilityQRcode :trace-config-no="traceInfo.traceConfigNo" />
        </div>
      </template>
    </Phone>
  </div>
</template>

<script>
import productLayout from "../product-info-layout/index";
import proprietorLayout from "../proprietor-info-layout/index";
import individuationLayout from "../individuation-info-layout/index";
import testReportInfoLayout from "../test-report-info-layout/index";
import environmentalDataLayout from "../environmental-data-info-layout/index";
import traceConfigApi from "@/api/trace-source-web/traceConfig.js";
import traceabilityQRcode from "../traceability-qrcode/index";
import Phone from "../traceability-qrcode/components/phone-dialog.vue";
import { mymixin } from "@/utils/mixins";
export default {
  name: "TraceabilityInformation",
  components: {
    productLayout,
    proprietorLayout,
    individuationLayout,
    testReportInfoLayout,
    environmentalDataLayout,
    traceabilityQRcode,
    Phone
  },
  mixins: [mymixin],
  props: {},
  data() {
    return {
      show: false,
      traceInfo: {},
      selectedIndex: -1,
      showH5: false,
      pageNo: -1
    };
  },
  mounted() {
  },
  beforeDestroy() {
  },
  methods: {
    handleScroll() {
      // 页面滑动的距离
      let scrollTop = document.getElementById('right-box').scrollTop // 当页面滑动的距离大于300px时元素显示，否则不显示
      // 根据顶部距离判断滚动什么位置
      if (scrollTop === document.getElementById('productData').offsetTop) {
        this.selectedIndex = 0
      } else if (scrollTop <= (document.getElementById('proprietorData').offsetTop + 20)) {
        this.selectedIndex = 1
      } else if (scrollTop <= (document.getElementById('individuationInfo').offsetTop + 20)) {
        this.selectedIndex = 2
      } else if (scrollTop <= (document.getElementById('testReportInfo').offsetTop + 20)) {
        this.selectedIndex = 3
      } else if (scrollTop <= (document.getElementById('environmentalData').offsetTop + 20)) {
        this.selectedIndex = 4
      }
    },
    queryTraceInfo(row, pageNo = -1) {
      this.pageNo = pageNo;
      traceConfigApi.numberQuery(row.traceConfigNo).then((res) => {
        console.log(res);
        let data = res.data;
        if (res.code === 1) {
          this.show = true;
          this.traceInfo = data;
        } else {
          this.$message.warning(res.msg);
        }
      });
      // 获取当前元素滚动效果
      this.selectedIndex = 0;
      document.getElementById('right-box').addEventListener('scroll', this.handleScroll)
    },
    modify() {},
    scrollIntoView(id, selectIndex) {
      this.selectedIndex = selectIndex;
      let height = document.getElementById(id).offsetTop; // 计算需要向上移动的距离
      console.log(height);
      document
        .querySelector(`#${id}`)
        .scrollIntoView(height ? height - 40 : height);
      // let element = document.getElementById(id);
      // console.log(element, height);
      // element.scroll({
      //   top: height, // 向上移动的距离，如果有fixede布局， 直接减去对应距离即可
      //   behavior: 'smooth', // 平滑移动
      // });
    },
    back() {
      this.show = false;
      this.$emit("back", true);
      // 退出销毁
      document.getElementById('right-box').removeEventListener('scroll', this.handleScroll)
    },
    complete() {
      this.show = false;
      if (this.traceInfo && this.traceInfo.traceType) {
        this.traceInfo.traceType === "个体" &&
          this.$router.push({
            name: "IndividualZmSourceCode",
            params: { ...this.traceInfo }
          });
        this.traceInfo.traceType === "批次" &&
          this.$router.push({
            name: "LotsZmSourceCode",
            params: { ...this.traceInfo }
          });
      }
    },
    preview() {
      this.showH5 = true;
    }
  }
};
</script>

<style scoped lang="scss">
@import "~@/styles/variables.scss";
.trace-qr-container {
  // min-width: 1800px;
  width: calc(100% - #{$sideBarWidth});
  height: calc(
    100% -
      (
        #{$footerHeight} + #{$headerHeight} + #{$tagsViewHeight} + #{$hamburgerHeight} +
          #{$actionBarHeight}
      ) + 5px
  );
  // width: 100%;
  // height: 100%;
  // overflow: hidden;
  position: fixed;
  // position: relative;
  display: flex;
  flex-direction: column;
  padding: 0 27px;
  box-sizing: border-box;
  transition: 0.5s;
  .operate-box {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    height: 41px;
    background: #e9f0f5;
    border-radius: 5px 5px 5px 5px;
    // padding-left: 30px;
    padding: 8px 30px 8px;
    box-sizing: border-box;
  }
  .main-box {
    display: flex;
    position: absolute;
    align-items: flex-start;
    width: calc(100% - 118px);
    height: calc(100% - 60px);
    margin-top: 50px;
    margin-left: 63px;
    padding-left: 82px;
    // padding-right: 10px;
    border-left: 7px #c7e3fe solid;
    background: #ffffff;
    .float-box {
      width: 126px;
      height: 100%;
      z-index: 2;
      position: absolute;
      left: 0;
      top: 31px;
      transform: translateX(-63px);
      .show-content-btn,
      .selected-btn {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 126px;
        height: 28px;
        font-weight: 400;
        font-size: 20px;
        color: #797979;
        background: #ecedef;
        box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.16);
        border-radius: 5px 5px 5px 5px;
        border: 1px solid #c7e3fe;
        margin-bottom: 10px;
        line-height: 28px;
        cursor: pointer;
      }
      .show-content-btn:hover {
        color: #1f74c7;
        background-color: #c7e3fe;
      }
      .selected-btn {
        color: #1f74c7;
        background-color: #c7e3fe;
      }
    }
    .right-box {
      position: relative;
      padding-right: 40px;
      width: 100%;
      height: 100%;
      overflow: scroll;
      scroll-behavior: smooth;
      box-sizing: border-box;
      padding: 0 10px;
    }
  }
}
</style>
